<!DOCTYPE html>
<html lang="en">
 

<head>
      
    <meta charset="UTF-8" />
      
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      
    <link href="css/bootstrap.min.css" rel="stylesheet" />
      <title></title>
     </head>
 

<body style="padding:100px;">
    <p > 点击序号checkbox编辑</p>
    <div>
        <button onclick="addUser()" class="btn btn-primary">新增</button>
        <button onclick="deleteUser()" class="btn btn-primary">删除</button>
        <button onclick="selectUser()" class="btn btn-primary">查询</button>
        <button onclick="getResultAll()" class="btn btn-primary">还原元素</button>
        <input id="userId" placeholder="按工号查询">
        <input id="username" placeholder="按姓名查询">
        
    </div>
       <table class="table table-responsive">
          <thead>
                <tr>
                      <th>序号</th>
                      <th>工号</th>
                      <th>姓名</th>
                      <th>性别</th>
                      <th>密码</th>
                      <th>年龄</th>
                      <th>出生日期</th>

                    </tr>
              </thead>
         <tbody id="tb">
                <tr class="warning" >
                      <td><input type="checkbox" id="items" onclick="canUpdateUser(this)"></td>
                      <td><input disabled value="1001" class="warning" style="border-style:none;width: 45px"></td>
                      <td><input disabled value="张三" class="warning" style="border-style:none;width: 45px"></td>
                      <td><input disabled value="女" class="warning" style="border-style:none;width: 45px"></td>
                      <td><input disabled value="1234" class="warning" style="border-style:none;width: 45px"></td>
                      <td><input disabled value="29" class="warning" style="border-style:none;width: 45px"></td>
                      <td><input disabled value="1991-1-1" class="warning" style="border-style:none;width: 80px"></td>

                    </tr>
            <tr class="info">
                      <td><input type="checkbox" id="items" onclick="canUpdateUser(this)"></td>
                      <td><input disabled value="1002" class="warning" style="border-style:none;width: 45px"></td>
                      <td><input disabled value="李四" class="warning" style="border-style:none;width: 45px"></td>
                      <td><input disabled value="男" class="warning" style="border-style:none;width: 45px"></td>
                      <td><input disabled value="1234" class="warning" style="border-style:none;width: 45px"></td>
                      <td><input disabled value="28" class="warning" style="border-style:none;width: 45px"></td>
                      <td><input disabled value="1991-1-1" class="warning" style="border-style:none;width: 80px"></td>

                    </tr>
            <tr class="warning">
                      <td><input type="checkbox" id="items" onclick="canUpdateUser(this)"></td>
                      <td><input disabled value="1003" class="warning" style="border-style:none;width: 45px"></td>
                      <td><input disabled value="王五" class="warning" style="border-style:none;width: 45px"></td>
                      <td><input disabled value="女" class="warning" style="border-style:none;width: 45px"></td>
                      <td><input disabled value="1234" class="warning" style="border-style:none;width: 45px"></td>
                      <td><input disabled value="27" class="warning" style="border-style:none;width: 45px"></td>
                      <td><input disabled value="1991-1-1" class="warning" style="border-style:none;width: 80px"></td>

                    </tr>
            <tr class="info">
                      <td><input type="checkbox" id="items" onclick="canUpdateUser(this)"></td>
                      <td><input disabled value="1004" class="warning" style="border-style:none;width: 45px"></td>
                      <td><input disabled value="赵六" class="warning" style="border-style:none;width: 45px"></td>
                      <td><input disabled value="女" class="warning" style="border-style:none;width: 45px"></td>
                      <td><input disabled value="1234" class="warning" style="border-style:none;width: 45px"></td>
                      <td><input disabled value="26" class="warning" style="border-style:none;width: 45px"></td>
                      <td><input disabled value="1991-1-1" class="warning" style="border-style:none;width: 80px"></td>

                    </tr>
        </tbody>
    </table>
</body>

<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="js/jquery-3.3.1.min.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="js/bootstrap.min.js"></script>
<script>
    //console.log($(":checkbox"));

    //新增用户
    function addUser() {
        var id = parseInt($("#tb tr:last").children('td').find('input')[1].value) + 1
        if ($("#tb tr:last").hasClass('warning')) {

            var user = '<tr class="info">' +
                '<td><input type="checkbox" id="items" onclick="canUpdateUser(this)"></td>' +
                '<td><input disabled value="' + id + '" class="warning" style="border-style:none;width: 45px"></td>' +
                '<td><input disabled value="姓名" class="warning" style="border-style:none;width: 45px"></td>' +
                '<td><input disabled value="性别" class="warning" style="border-style:none;width: 45px"></td>' +
                '<td><input disabled value="1234" class="warning" style="border-style:none;width: 45px"></td>' +
                '<td><input disabled value="年龄" class="warning" style="border-style:none;width: 45px"></td>' +
                '<td><input disabled value="1991-1-1" class="warning" style="border-style:none;width: 80px"></td>'
            $("#tb tr:last").after(user);
        } else {
            var user = '<tr class="warning  ">' +
                '<td><input type="checkbox" id="items" onclick="canUpdateUser(this)"></td>' +
                '<td><input disabled value="' + id + '" class="warning" style="border-style:none;width: 45px"></td>' +
                '<td><input disabled value="姓名" class="warning" style="border-style:none;width: 45px"></td>' +
                '<td><input disabled value="性别" class="warning" style="border-style:none;width: 45px"></td>' +
                '<td><input disabled value="1234" class="warning" style="border-style:none;width: 45px"></td>' +
                '<td><input disabled value="年龄" class="warning" style="border-style:none;width: 45px"></td>' +
                '<td><input disabled value="1991-1-1" class="warning" style="border-style:none;width: 80px"></td>'
            user = $("#tb tr:last").after(user);
        }

    }
    //通过checkbox改成可编辑用户
    function canUpdateUser(checkB) {
        console.log(($(checkB)).prop("checked"))
        if (($(checkB)).prop("checked")) {
            //选中的话则把用户信息改成可编辑 否则改成不可编辑 通过input的disabled控制
            $(checkB).parent().parent().find('input').removeAttr('disabled')

        } else {
            var inputs = $(checkB).parent().parent().find('input')
            for (i = 1; i < inputs.length; i++) {
                $(inputs[i]).attr("disabled", true)
            }
        }
    }

    //删除用户
    function deleteUser() {
        console.log($(":checkbox"))
        var checkboxs = $(":checkbox")
        for (i = 0; i < checkboxs.length; i++) {
            if ($(checkboxs[i]).prop('checked')) {
                console.log($(checkboxs[i]).parent().parent())
                $($(checkboxs[i]).parent().parent()).remove();
            }
        }
    }

    //根据完整工号以及姓名查询用户查询用户
    function selectUser() {
        var userId = $('#userId').val();
        var username = $('#username').val();
        var tbs = $('#tb tr')
        console.log($(tbs[1]).find('input')[1].value);
        
        if (userId != '') {
            if (username != '') {
                //查询条件为ID+username
                for (i = 0; i < tbs.length; i++) {
                    if ($(tbs[i]).find('input')[1].value == userId && $(tbs[i]).find('input')[2].value == username) {
                        selectRusult(i,tbs);
                    }
                }
                // console.log(userId + '  ' +username)
            } else {
                //查询条件只有ID
                for (i = 0; i < tbs.length; i++) {
                    if ($(tbs[i]).find('input')[1].value == userId) {
                        selectRusult(i,tbs);
                    }

                }
                // console.log(userId)
            }
        } else {
            //查询条件只有用户名
            for (i = 0; i < tbs.length; i++) {
                if ($(tbs[i]).find('input')[2].value == username) {
                    selectRusult(i,tbs);
                }

            }
        }
        console.log(userId + '  ' + username)
        $('#userId')
        $('#username')
    }

    //展示查询结果 删除除了查询结果外的元素 根据传进的元素数组跟查询结果的下标
    function selectRusult(tbsIndex,tbs){
        $(tbs[i]).removeAttr('hidden')
        for(i = 0; i < tbs.length; i++){
            if(i != tbsIndex){
                $(tbs[i]).attr('hidden','hidden');
            }
        }

    }
    //查询之后 再展示所有元素
    function getResultAll(){
        var tbs = $('#tb tr')
        for (i = 0; i < tbs.length; i++) {
                $(tbs[i]).removeAttr('hidden');
            }
    }

</script>

</html>